<template>
    <div class="PageDay0103">
        <!-- :style是v-bind指令，可以动态绑定样式，：class是v-bind指令，可以动态绑定类名 -->
         <!-- 这里的flag变量是data里面的属性，可以直接用{{}}语法输出 -->
        <div :style="flag < 10 ? 'color: green': 'color: red'"><p>{{ flag }}</p></div>
        <input type="button" value="增加" @click="add()" />
        <input type="button" value="减少" @click="decrement()" />
        <input type="button" value="切换颜色" @click="changeColor()"/>
        <div :class="fontColor"><h1>☃{{ selectedPerson ? selectedPerson.name+' - '+selectedPerson.age : '未选择' }}
            
        </h1></div>
        <!-- v-text指令可以输出变量值和常量值覆盖标签内容，v-html指令可以输出变量值和常量值覆盖标签内容并解析html标签 -->
         <div v-text="flag"></div>
        <div v-text="div"></div>  <!-- 直接输出<h1>Hello World</h1> -->
        <div v-html="div"></div>  <!-- 输出Hello World -->
        <select name="" id="" v-model="selectedPerson">
            <option v-for="person in data" :key="person.name" :value="person">
                {{ person.name }} - {{ person.age }}</option>
        </select>
    </div>
</template>
<script>
export default {
    name: 'PageDay0103',
    data () {
        return {
            flag: 1,
            fontColor:"font-color-green",
            div: "<h1>Hello World</h1>",
            data:[ {
                name: 'John',
                age: 25,
            },
            {
                name: 'Mary',
                age: 30,
            },
            {
                name: 'Tom',
                age: 20,        
            },
        ],
        selectedPerson: null
        };
    },
    mounted: function () {
        
    },
    watch: {
        flag(newVal, oldVal) {
            console.log('newVal:', newVal, 'oldVal:', oldVal);
        },
        fontColor(newVal, oldVal) {
            console.log('newVal:', newVal, 'oldVal:', oldVal);
        },
        // data的监控，无法监控对象属性的变化
        // data(newVal, oldVal) {
        //     console.log('data newVal:', newVal.name, 'data oldVal:', oldVal.name);
        // },

        // 监控对象的变化
        selectedPerson:{
            handler(newVal, oldVal) {
                console.log('selectedPerson newVal:', newVal, 'selectedPerson oldVal:', oldVal);
        },
        immediate: true,
        deep: true,
        },
        // 监控对象属性的变化
        'selectedPerson.name'(newVal, oldVal) {
            console.log('selectedPerson.name newVal:', newVal, 'selectedPerson.name oldVal:', oldVal);
        },
    
    },
    methods: {
        add() {
            this.flag += 1;
        },
        decrement() {
            this.flag -= 1;
        },
        changeColor() {
            this.fontColor = this.fontColor === "font-color-green"? "font-color-red" : "font-color-green";
        }
        
    }
};
</script>
<style scoped>
    .font-color-red {
        color: red;
    }
    .font-color-green {
        color: green;
    }
</style>